<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增部门</title>
    <!-- 引入jquery   -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!--  jquery页面处理脚本  -->

    <script>

        $(function () {
// 为新增按钮绑定事件
                $('#addDept').on('click',function (){
                    var value_name=$('#name').val();
                    var value_remark=$('#remark').val();
                    console.log(value_name);
                    console.log(value_remark);

                    var param={
                        name: value_name,
                        remark: value_remark
                    };

                    $.ajax({
                        url: '/hrms/dept/add',
                        method: 'post',
                        dataType: 'json',
                        data: param,
                        success: function (data) {
                            console.log("测试新增部门功能！");
                            console.log(data);
                            if (data.status==200){
                                alert(data.message);
                                // 完成后关闭当前页面
                                close();
                                // 重定向到某个页面
                                // 方式一：location.replac()方法
                                 location.replace('/hrms/page/dept');
                                opener.location.reload();
                                // 方式二： location的href属性赋值
                                // location.href='/hrms/page/dept';
                                // 方式三：location赋值
                               // location='/hrms/page/dept';

                               // jquery方式：把windows对象的location封装成jquery对象，然后用attr()或者prop()设置值
                               //  attr和prop方法是有区别的，并且容易混淆。这里总结下：
                               //
                               //  1、如果没有静态自定义的属性。则不管是否会动态设置固定属性或动态属性。都应该用 prop方法，删除也用removeProp方法。
                               //
                               //  2、对于静态自定义的属性，则用attr方法和removeAttr来操作。


                               //  如果同时有静态自定义属性和动态自定义属性，则使用时要小心区别。
                                // $(location).attr('href','/hrms/page/dept');
                                // $(location).prop('href','/hrms/page/dept');
                                // $(window).prop('location','/hrms/page/dept');
                            }

                        },

                    });

                });

// 为取消按钮绑定事件
            $("#addDept_cancle").on('click',function (){
                console.log("取消按钮事件");
                close();
            });

        });
    </script>
</head>
<body>
新增部门页面
<br>
<!-- 传统方式提交表单 -->
<!--<div><span>传统方式提交表单</span></div>-->
<!--<form action="/hrms/dept/add" method="post" id="addDept" name="dept" enctype="multipart/form-data">-->

<!--    <div><label for="name">部门名称：</label><input type="text" id="name" name="name"></div>-->
<!--    <div><label for="remark">部门详细信息：</label><input type="text" id="remark" name="remark"></div>-->

<!--    <div>-->
<!-- button的type默认是submit,可以提交form表单到action指定的url,为buttons时则为普通按钮，需添加绑定事件处理 -->
<!--        <button type="submit">提交</button>-->
<!--    </div>-->
<!--</form>-->
<!-- 添加一条隔离线-->
<hr>
<!-- 使用ajax方式提交表单 -->
<div><span>使用ajax方式提交表单</span></div>
<form id="addDeptByAjax" name="dept">

    <div><label for="name">部门名称：</label><input type="text" id="name" name="name"></div>
    <div><label for="remark">部门详细信息：</label><input type="text" id="remark" name="remark"></div>

    <div>
        <button type="button" id="addDept">提交</button>
        <button type="button" id="addDept_cancle">取消</button>
    </div>
</form>
</body>
</html>